<template>
  <div class="wrap">
    <div class="bgWrap">
      <div class="item">
        <div class="title">
          <em class="redPoint"></em>
          商品标题
        </div>
        <div class="inputWrap">
          <input
            type=""
            name=""
            value=""
            v-model="goodsName"
            maxlength="50"
            placeholder="请输入商品标题(50字内)"
          />
        </div>
      </div>

      <div class="item">
        <div class="title">
          <em class="redPoint"></em>
          商品类型
        </div>
        <div class="inputWrap" @click="show = true" style="color:#00000079;font-size:12px;line-height:40px;padding-left:10px;width:calc(100% - 10px)">
          <!-- <input
            type=""
            name=""
            value=""
            v-model="chooseGoodsType.title"
            placeholder="请选择店铺类型(5字内)"
          /> -->
          {{chooseGoodsType.title||"请选择店铺类型"}}
          <img src="@/assets/rightArrow.png" alt="" class="rightArrow" />
        </div>
      </div>

      <div class="item">
        <div class="left">
          <em class="redPoint"></em>
          商品大图(1张)
        </div>
        <div class="right">
          <van-uploader
            v-model="fileListGoods"
            :after-read="afterReadGoods"
            :max-count="1"
            class="uploadImg"
          />
        </div>
      </div>
      <div class="item">
        <div class="goodsImgList">
          <em class="redPoint"></em>
          商品列表图
        </div>
        <div class="bottomImgList">
          <van-uploader
            v-model="fileBannerList"
            :after-read="afterReadBanner"
            :max-count="9"
            class="uploadImg"
          />
        </div>
      </div>
    </div>
    <div class="bgWrap" @click="jumpAddSize">
      <div class="item">
        <div class="title" @click="jumpAddSize">
          <em class="redPoint"></em>
          商品规格
          <img src="@/assets/rightArrow.png" alt="" class="rightArrow rightArrow2" />
        </div>
        <div class="inputWrap2">
          <div class="sizeItem" v-for="(item,index) in shopGoodsSpecsList" :key="index">
            <img :src="$imgUrl+item.imageUrl" alt="" class="sizeImg" />
            <div class="sizeText">
              <p class="sizeName">{{item.title}}</p>
              <p class="sizeNum">￥{{item.price}} <em class="haveNum">库存:{{item.stock}}</em></p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="bgWrap">
      <div class="item">
        <div class="title">
          <em class="redPoint"></em>
          商品详情介绍
          <!-- <img src="@/assets/rightArrow.png" alt="" class="rightArrow rightArrow2" /> -->
        </div>
        <div class="goodsExpalin">
            <van-field
            v-model="goodsIntroduce"
            rows="1"
            autosize
            type="textarea"
            placeholder="请输入商品详情介绍"
            />
        </div>
        <div class="goodsExpalin" style="display: none">请填写商品详情</div>
      </div>
    </div>

    <div class="nextButton" @click="public">发布</div>
    <div class="popupWrap">
      <van-popup v-model="show" position="bottom" :style="{ height: '40%' }">
        <van-picker
          title="选择商品类型"
          show-toolbar
          :columns="columns"
          @confirm="onConfirm"
          @cancel="onCancel"
          @change="onChange"
        />
      </van-popup>
    </div>
  </div>
</template>

<script>
import { Switch, Checkbox, Popup, Picker, Uploader,Field,Toast  } from "vant";
import axios from "axios"; // 引入axios
import { apiGetGoodsTypeList,apiAddOrEditGoods,apiPlatformGetUserShopDetails,apiGetGoodsDetails } from "@/request/api"; // api接口
export default {
  name: "App",
  data() {
    return {
      shopId:'',//店铺id
      checked: true,
      show: false,
      showMask: false,
      columns: [],
      goodsName: "", //商品名称
      fileListGoods: [], //商品大图-组件
      goodsImg:'',//商品大图服务器图片
      fileBannerList: [], //商品banner图-组件
      bannerImg:'',//商品banner服务器图片
      resGoodsTypeList: [], //商品类型
      chooseGoodsType: "", //选择的商品类型
      goodsIntroduce:'',//商品详情介绍
      shopGoodsSpecsList:[],//添加的商品规格列表数据
      // ————————————————————————————编辑相关 ：
      resGoodsDetail:"",//商品详情
      GoodsId:this.$route.query.GoodsId,//商品详情编辑商品功能跳转携带的商品id
    };
  },
  mounted() {
    document.querySelector("body").setAttribute("style", "background-color:#F2F4FA");
    if(this.GoodsId){ //如果存在商品id  说明是编辑商品功能
    console.log('编辑')
      this.getGoodsDetails() //请求商品详情
     
    }else{  //否则是新增商品功能
      this.getShopDetails()
      this.shopGoodsSpecsList = JSON.parse(localStorage.getItem("shopGoodsSpecsList"))?JSON.parse(localStorage.getItem("shopGoodsSpecsList")):[]
      console.log('添加的规格列表',this.shopGoodsSpecsList)
      var Information = JSON.parse(localStorage.getItem("Information"))
      if (Information) {
        this.goodsName = Information.goodsName 
        this.fileListGoods = Information.fileListGoods
        this.fileBannerList = Information.fileBannerList 
        this.chooseGoodsType = Information.chooseGoodsType 
        this.goodsIntroduce = Information.goodsIntroduce
        this.bannerImg =  Information.bannerImg
        this.goodsImg =  Information.goodsImg
      }
    }
  },
  methods: {
    //商品详情：
    getGoodsDetails() {
      apiGetGoodsDetails({
        id: this.GoodsId,
      }).then((res) => {
        this.resGoodsDetail = res.data;
        this.shopId = res.data.shopId
        this.getShopTypeList(); //通过商铺id获取店铺商品类型
        console.log('商品详情',this.resGoodsDetail)
        this.goodsName = this.resGoodsDetail.goodsName 
        // this.fileListGoods = this.resGoodsDetail.fileListGoods
        // this.fileBannerList = this.resGoodsDetail.fileBannerList 
        // this.chooseGoodsType = this.chooseGoodsType 
        this.goodsIntroduce = this.resGoodsDetail.detailsContent
        this.bannerImg =  this.resGoodsDetail.bannerImgUrl
        this.goodsImg =  this.resGoodsDetail.listImgUrl
        this.shopGoodsSpecsList = this.resGoodsDetail.goodsSpecsList
        // var bannerImgUrl = this.resGoodsDetail.bannerImgUrl.split(",");
      });
    },
    //店铺详情api获取商铺id：
    getShopDetails() {
      apiPlatformGetUserShopDetails({}).then((res) => {
        this.shopId = res.data.id;   
        this.getShopTypeList(); //通过商铺id获取店铺商品类型
        console.log("店铺id", this.shopId);
      });
    },
    //上传商品列表banner图到服务器：
    afterReadBanner(file) {
      var serverSrc = this.$imgUrl;
      var form_data = new FormData();
      var files = file.file;
      form_data.append("file", files);
      var that = this;
      axios({
        url: serverSrc + "/common/upload",
        data: form_data,
        contentType: false,
        processData: false,
        method: "post",
        headers: {
          "Content-Type": "multipart/form-data",
        },
      }).then(function (res) {
        that.bannerImg = that.bannerImg + res.data.data.fileName + ",";
      });
    },
    //上传商品大图到服务器
    afterReadGoods(file) {
      console.log('file',file)
      var that = this;
      var serverSrc = this.$imgUrl;
      var form_data = new FormData();
      var files = file.file;
      form_data.append("file", files);
      axios({
        url: serverSrc + "/common/upload",
        data: form_data,
        contentType: false,
        processData: false,
        method: "post",
        headers: {
          "Content-Type": "multipart/form-data",
        },
      }).then(function (res) {
         that.goodsImg = that.goodsImg + res.data.data.fileName + ",";
      });
    },
    //封装保存已经填写的信息
    saveFillInfo() {
      var Information = {};
      Information.goodsName = this.goodsName;
      Information.fileListGoods = this.fileListGoods;
      Information.fileBannerList = this.fileBannerList;
      Information.chooseGoodsType = this.chooseGoodsType;
      Information.goodsIntroduce =  this.goodsIntroduce
      Information.bannerImg = this.bannerImg;
      Information.goodsImg =  this.goodsImg
      console.log("Information", Information)
      localStorage.setItem("Information",JSON.stringify(Information))
    },
    //获取首商品类型：
    getShopTypeList() {
      apiGetGoodsTypeList({
        id:this.shopId,
      }).then((res) => {
        this.resGoodsTypeList = res.data;
        console.log("商品类型:", this.resGoodsTypeList);
        this.resGoodsTypeList.map((item) => {
          this.columns.push(item.title);
          if(item.id==this.resGoodsDetail.typeId){
             this.chooseGoodsType = item
          }
        });
      });
    },
    //选择店铺类型：
    onConfirm(value, index) {
      this.show = false;
      this.chooseGoodsType = this.resGoodsTypeList[index];
    },
    //发布
    public() {
        Toast.loading({
          message: '提交中...',
          forbidClick: true,
          overlay:true,
        });
        this.saveFillInfo()
        console.log('图片goodsImg01',this.goodsImg.toString().slice(0, -1))
       console.log('图片bannerImg02',this.bannerImg.toString().slice(0, -1))
       apiAddOrEditGoods({
           bannerImgUrl:this.bannerImg.toString().slice(0, -1),
           detailsContent:this.goodsIntroduce,
           goodsName:this.goodsName,
           id:"",//修改必传商品id
           typeId:this.chooseGoodsType.id,
           listImgUrl:this.goodsImg.toString().slice(0, -1),
           shopId:this.shopId,
           shopGoodsSpecsList:this.shopGoodsSpecsList,
       }).then((res) => {
          if(res.code==200){
            this.$toast.success('发布成功')
            this.$router.push({
              path: "/pages/bGoodsManng",
              query: {
                  //传递参数
                },
            });
          }
       });
    },
    //编辑商品规格：
    // jumpEidtorSize(){
    //   this.saveFillInfo()
    //   this.$router.push({
    //     path: "/pages/bEidtorSize",
    //     query: {
    //       //传递参数
    //     },
    //   });
    // },
      //添加规格页面
    jumpAddSize() {
      this.saveFillInfo()
      this.$router.push({
        path: "/pages/bAddSize",
        query: {
          //传递参数
          fromId:0,//跳转新增规格页面0，编辑的话为1
        },
      });
    },
    onChange() {},
    onCancel() {},
  },
  created() {},
  components: {
    [Switch.name]: Switch,
    [Checkbox.name]: Checkbox,
    [Popup.name]: Popup,
    [Picker.name]: Picker,
    [Uploader.name]: Uploader,
    [Field.name]: Field,
    [Toast.name]:Toast
  },
};
</script>

<style scoped>
.bgWrap {
  width: calc(95% - 30px);
  padding: 20px 15px;
  margin: 20px auto;
  background: #ffffff;
  border-radius: 20px;
}
.goodsExpalin {
  margin-top: 15px;
  font-size: 12px;
  font-weight: 400;
  color: #000000;
  line-height: 16px;
}
.bottomImgList {
  margin-top: 15px;
}
.item {
  overflow: hidden;
  font-size: 14px;
  font-weight: 400;
  color: #000000;
  margin-bottom: 15px;
}
.left {
  float: left;
  margin-top: 30px;
}
.redPoint {
  display: inline-block;
  width: 5px;
  height: 5px;
  background: #ff4646;
  border-radius: 50%;
  margin-bottom: 2px;
}
.right {
  float: right;
}
.uploadImg {
  /* width: 50px;
  height: 50px; */
}
.title {
}

.inputWrap {
  width: 100%;
  background: #f2f4fa;
  height: 40px;
  margin-top: 10px;
  border-radius: 20px;
  display: flex;
  justify-content: space-between;
}
.inputWrap2 {
  width: 100%;
  border-radius: 20px;
}
.sizeItem {
  background: #f2f4fa;
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
  margin-top: 15px;
}
.sizeImg {
  width: 50px;
  height: 40px;
  float: left;
  margin: 10px;
}
.sizeText {
  float: left;
  font-size: 10px;
  font-weight: 300;
  color: #999999;
  margin-top: 13px;
}
.sizeName {
  font-size: 13px;
  font-weight: 600;
  color: #181818;
  margin-bottom: 3px;
}
.sizeNum {
}
.haveNum {
}
input {
  border: 0px;
  background: #f2f4fa;
  width: 85%;
  height: 38px;
  margin-left: 15px;
}
input::placeholder {
  font-size: 12px;
  font-weight: 300;
  color: #999999;
}
.rightArrow {
  width: 4px;
  height: 8px;
  margin-right: 15px;
  margin-top: 15px;
}
.rightArrow2 {
  float: right;
  margin-top: 5px;
}
.nextButton {
  width: 95%;
  height: 50px;
  line-height: 50px;
  margin: 0 auto;
  background: #181818;
  box-shadow: 0px 5px 20px 0px rgba(24, 24, 24, 0.26);
  border-radius: 25px;
  margin-bottom: 15px;
  font-size: 16px;
  font-weight: 500;
  color: #ffffff;
  text-align: center;
}
.van-checkbox {
  float: left;
}
</style>
